feat: 给 searchbar 暴露 input 更多属性 #3416
Conversation
github-actions
bot
added
action:review
Walkthrough为SearchBar组件添加新的 Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3416 +/- ##
==========================================
Coverage 88.15% 88.15%
==========================================
Files 291 291
Lines 19212 19214 +2
Branches 2988 2988
==========================================
+ Hits 16937 16939 +2
Misses 2269 2269
Partials 6 6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/packages/searchbar/searchbar.tsx (1)
177-192: 属性展开顺序存在严重问题当前实现将
{...inputProps}放在所有其他属性之后（第 190 行），这会导致用户传入的inputProps可以覆盖组件的关键属性，破坏组件的核心功能：
- 如果用户在
inputProps中传入onChange，会覆盖handleChange，导致组件状态管理失效- 如果传入
onFocus/onBlur，会破坏焦点处理和 tag 模式逻辑- 如果传入
value，会破坏受控输入模式- 如果传入
disabled、readOnly、maxLength等，会与组件 props 冲突- 如果传入
className，会覆盖组件样式类名- 如果传入
ref，会覆盖searchInputRef🔧 建议的修复方案
将
{...inputProps}移到组件管理的属性之前展开，确保组件的关键属性始终优先：const renderField = () => { const inputCls = classNames(`${classPrefix}-input`) return ( <input className={inputCls} + {...inputProps} ref={searchInputRef} value={value || ''} placeholder={placeholder || locale.placeholder} disabled={disabled} readOnly={readOnly} maxLength={maxLength} onKeyDown={onKeydown} onChange={handleChange} onFocus={handleFocus} onBlur={handleBlur} onClick={handleInputClick} - {...inputProps} /> ) }这样可以：
- 允许用户添加额外的属性（如
aria-*、data-*、autoComplete、name等）- 防止用户意外覆盖关键属性而破坏组件功能
🤖 Fix all issues with AI agents
In @src/packages/searchbar/demos/taro/demo8.tsx:
- Around line 10-14: The demo currently sets inputProps={{ maxlength: 20 }}
which conflicts with the SearchBar component's maxLength prop because inputProps
are spread last (see searchbar.taro.tsx) and will override it; either
remove/rename this conflicting maxlength, or explicitly document the override in
a comment if the demo is meant to show override behavior; best fix is to replace
maxlength with a non-conflicting Taro Input attribute such as cursor-spacing or
confirm-hold (update the demo in demo8.tsx where SearchBar is instantiated and
its inputProps object).
🧹 Nitpick comments (1)
src/packages/searchbar/doc.md (1)
79-87: 建议补充 prop 冲突说明文档清晰地说明了 inputProps 的功能,但建议补充一个注意事项:当 inputProps 中的属性与组件现有 props(如
disabled、maxLength等)冲突时的行为说明,避免用户产生困惑。例如,可以在文档中说明:
- inputProps 会在最后展开,可能会覆盖组件的同名属性
- 推荐仅用于扩展组件未暴露的原生属性
Also applies to: 121-121
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
src/packages/searchbar/demo.taro.tsxsrc/packages/searchbar/demo.tsxsrc/packages/searchbar/demos/h5/demo8.tsxsrc/packages/searchbar/demos/taro/demo8.tsxsrc/packages/searchbar/doc.en-US.mdsrc/packages/searchbar/doc.mdsrc/packages/searchbar/doc.taro.mdsrc/packages/searchbar/doc.zh-TW.mdsrc/packages/searchbar/searchbar.taro.tsxsrc/packages/searchbar/searchbar.tsxsrc/types/spec/searchbar/h5.tssrc/types/spec/searchbar/taro.ts
🧰 Additional context used
🧬 Code graph analysis (1)
src/packages/searchbar/demos/h5/demo8.tsx (2)
src/packages/searchbar/searchbar.tsx (1)
SearchBar(33-287)src/packages/searchbar/demos/h5/demo2.tsx (1)
SearchBar(4-10)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build
- GitHub Check: test
🔇 Additional comments (15)
src/types/spec/searchbar/h5.ts (2)
1-1: 类型导入正确。正确导入了
InputHTMLAttributes类型，用于定义 inputProps 的类型。
14-14: inputProps 属性的实现已正确处理。在 src/packages/searchbar/searchbar.tsx 第 190 行，inputProps 已经正确地使用展开运算符
{...inputProps}应用到底层 input 元素上，能够支持传入原生 input 元素的所有属性。实现与类型定义相匹配。src/packages/searchbar/demo.tsx (3)
25-47: 国际化翻译完整。为 zh-CN、zh-TW 和 en-US 三种语言都正确添加了 title8 翻译。
68-69: Demo8 渲染位置合理。Demo8 在 title7 和 title6 之间渲染，位置安排合理。
11-11: Demo8 导入正确。
./demos/h5/demo8.tsx文件存在，导入语句有效。src/packages/searchbar/doc.taro.md (2)
81-89: InputProps 扩展属性文档清晰。文档清楚地说明了
inputProps属性的用途，并正确引用了 taro/demo8.tsx 示例。
121-121: 属性表文档准确。在属性表中正确添加了 inputProps 的说明，类型为
Partial<InputProps>，符合 Taro 平台的类型定义。src/packages/searchbar/doc.zh-TW.md (2)
81-89: InputProps 擴展屬性文檔清晰。繁體中文文檔清楚地說明了
inputProps屬性的用途，並正確引用了 h5/demo8.tsx 示例。
121-121: 屬性表文檔準確。在屬性表中正確添加了 inputProps 的說明，類型為
Partial<InputHTMLAttributes<HTMLInputElement>>，符合 H5 平台的類型定義。src/types/spec/searchbar/taro.ts (1)
18-18: Taro 平台的 inputProps 类型定义和实现正确。
Partial<InputProps>的类型定义合适，实现中已在 searchbar.taro.tsx 第 193 和 213 行正确地将 inputProps 展开到 TaroInput 组件，涵盖 WEB 和小程序环境两种情况。src/packages/searchbar/demo.taro.tsx (1)
15-15: Demo 集成实现正确新增的 Demo8 导入、国际化配置和渲染逻辑都实现正确，能够有效展示 inputProps 功能。
Also applies to: 29-29, 40-40, 51-51, 78-79
src/packages/searchbar/demos/h5/demo8.tsx (1)
1-33: 示例代码实现良好Demo 展示了 inputProps 的多种使用场景,包括自动完成控制、拼写检查、自定义输入类型和无障碍属性,示例丰富且实用。
src/packages/searchbar/doc.en-US.md (2)
81-91: 文档说明清晰准确新增的 InputProps 扩展属性文档说明清晰，正确引用了演示代码，有助于开发者理解如何使用这个新特性。
128-128: Props 表格更新正确
inputProps属性的类型定义和描述准确，与实现保持一致。src/packages/searchbar/searchbar.tsx (1)
61-61: Props 解构正确正确地将
inputProps从 props 中解构出来。
| inputProps={{ | ||
| confirmType: 'search', | ||
| password: false, | ||
| maxlength: 20, | ||
| }} |
There was a problem hiding this comment.
示例中的 maxlength 属性可能导致混淆
Demo 中使用 inputProps={{ maxlength: 20 }} 和 maxlength: 10,但 SearchBar 组件已经提供了 maxLength prop。由于 inputProps 在最后展开(如 searchbar.taro.tsx 实现所示),这里的 maxlength 会覆盖组件的 maxLength prop。
建议:
- 如果是为了演示覆盖行为,应在注释中明确说明
- 如果不是,建议使用其他不冲突的 Taro Input 属性作为示例,如
cursor-spacing、confirm-hold等
这与 searchbar.taro.tsx 中标识的 prop 覆盖问题相关。
Also applies to: 26-28
🤖 Prompt for AI Agents
In @src/packages/searchbar/demos/taro/demo8.tsx around lines 10 - 14, The demo
currently sets inputProps={{ maxlength: 20 }} which conflicts with the SearchBar
component's maxLength prop because inputProps are spread last (see
searchbar.taro.tsx) and will override it; either remove/rename this conflicting
maxlength, or explicitly document the override in a comment if the demo is meant
to show override behavior; best fix is to replace maxlength with a
non-conflicting Taro Input attribute such as cursor-spacing or confirm-hold
(update the demo in demo8.tsx where SearchBar is instantiated and its inputProps
object).
| onBlur={handleBlur} | ||
| onClick={onInputClick} | ||
| onConfirm={onConfirm} | ||
| {...inputProps} |
There was a problem hiding this comment.
注意 inputProps 可能覆盖组件自身属性
当前实现中,{...inputProps} 在所有组件属性之后展开,这意味着如果 inputProps 中包含与组件已有属性同名的属性(如 maxlength、disabled、value 等),会覆盖组件的原有属性,可能导致组件的 props 失效。
建议考虑以下方案之一:
- 调整展开顺序,将
{...inputProps}放在组件属性之前,让组件属性优先级更高 - 在文档中明确说明这种覆盖行为,并建议开发者避免在 inputProps 中使用已有的属性名
- 过滤掉 inputProps 中与组件已有属性冲突的属性
📝 建议的修复方案
方案1: 调整展开顺序(推荐)
<TaroInput
className={inputCls}
ref={searchInputRef}
+ {...inputProps}
style={{
...style,
...{ color: `${innerTag ? 'transparent' : '#333'}` },
}}
value={value}
placeholder={placeholder || locale.placeholder}
disabled={disabled || readOnly}
maxlength={maxLength}
autoFocus={autoFocus}
onInput={handleInput}
onFocus={handleFocus}
onBlur={handleBlur}
onClick={onInputClick}
onConfirm={onConfirm}
- {...inputProps}
/>方案2: 过滤冲突属性
+ const {
+ maxlength: _maxlength,
+ disabled: _disabled,
+ value: _value,
+ placeholder: _placeholder,
+ ...safeInputProps
+ } = inputProps || {}
<TaroInput
// ... 其他属性
- {...inputProps}
+ {...safeInputProps}
/>Also applies to: 213-213
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
发布说明
新功能
文档
✏️ Tip: You can customize this high-level summary in your review settings.